<template>

    <chart id="line" :option="option_column" :style="'height:'+height"></chart>

</template>

<script>
    const unit = {
        "rain":"mm",
        "d_value":"mm",
        "d_value_rate":"%"
    }
    export default {
        name: "Tline",
        props:["height","lineData","type","title"],
        data() {
            return {
                option_column: {
                    grid: {
                        top: 10,
                        bottom:30,
                    },
                    tooltip: {
                        trigger: "axis",
                        valueFormatter: this.lineData?(value) => value+unit[this.type]:value => value+'mm'
                    },
                    xAxis: {
                        data: ["周一", "周二", "周三", "周四","周五","周六","周日"],
                        axisLabel: {
                            // color: "#F8733B",
                            fontSize:'14px'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#333333 "
                            }
                        },
                        type: 'category',
                        boundaryGap: false,
                    },
                    yAxis: [{
                        show: false
                    }],
                    series: [
                        {
                            name: this.title,
                            type: "line",
                            barWidth: 5,
                            data: [10, 6, 5, 8,10, 6, 5],
                            itemStyle: {
                                color: "#F8733B"
                            },
                            lineStyle: {
                                type: "dotted"
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(248,115,59,.5)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(0,0,0,.5)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                    ],
                },
            }
        },
        watch:{
            lineData(val){
                let date = []
                let resData = []
                console.log(this.type)
                val.forEach(item=>{
                    date.push( new Date(item.create_time).toLocaleString().split(" ")[1]);
                    resData.push(item[this.type])
                })
                this.option_column.xAxis.data = date
                this.option_column.series[0].data=resData
            },
        }
    }
</script>

<style scoped>

</style>
